<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../assets/stylesheets/comm.css">
    <link rel="stylesheet" href="../assets/stylesheets/foot.css">
    <script src="../assets/javascripts/index.js"></script>
</head>
<body>
<!--头部-->
<div class="html_header">
    <a href="../index.html">
        <img src="../assets/images/index/logo.png" class="header_img"/>
    </a>
    <ul class="index_ul">
        <li><a href="../about_bianmingka/about_convenience_card.html">关于便民卡</a></li>
        <li><a>服务指南</a></li>
        <li><a>公众号</a></li>
        <li><a>应用下载</a></li>
        <li><a>商户中心</a></li>
        <li><a href="login.html">个人中心</a></li>
    </ul>
</div>
<!--中心内容-->
<div class="body height_lose personal_body">
    <!-- 个人中心menu -->
    <div class="menu div_float_left personal_menu">
        <ul>
            <li>
                <div class="li"><span class="jiantou_active">个人中心</span></div>
                <ul class="ul_active">
                    <li>
                        <div class="li"><span>我的订单</span></div>
                        <ul class="in_ul">
                            <a href="#">
                                <li>
                                    全部订单
                                </li>
                            </a>
                            <a href="#">
                                <li>
                                    待付款
                                </li>
                            </a>
                            <a href="#">
                                <li>
                                    已完成
                                </li>
                            </a>
                            <a href="#">
                                <li>
                                    已取消
                                </li>
                            </a>
                        </ul>
                    </li>
                    <li>
                        <div class="li"><span class="jiantou_active">生活缴费</span></div>
                        <ul class="in_ul ul_active">
                            <a href="recharge_phone.html">
                                <li>
                                    话费充值
                                </li>
                            </a>
                            <a href="electric/electric_index.html">
                                <li>
                                    电费缴纳
                                </li>
                            </a>
                            <a href="../warm/warm_index.html">
                                <li>
                                    取暖费缴纳
                                </li>
                            </a>
                            <a href="water_index.html" class="active">
                                <li>
                                    水费缴纳
                                </li>
                            </a>
                            <a href="../gas/gas_index.html">
                                <li>
                                    燃气费缴纳
                                </li>
                            </a>
                        </ul>
                    </li>
                </ul>
            </li>

        </ul>
    </div>
    <!-- 水费缴纳content -->
    <div class="life_content">
        <div class="life_header">
            <label class="life_title lt_gray_color large_fontsize">
                <img src="../assets/images/life/1.png" class="promise"/>
                <label class="main_color">品质保证</label>
                <label class="main_color">安全快捷</label>
                <a class="small_fontsize gray_color mar_left">缴费账单</a>
            </label>
        </div>
        <form class="querybill_checkbox margin_top_large">
            <div>
                <label>缴费类型：</label>
                <label class="checkbox_label relative_position">
                    <input type="checkbox"/>
                    <label>全部</label>
                </label>
                <label class="checkbox_label relative_position">
                    <input type="checkbox"/>
                    <label>水费</label>
                </label>
                <label class="checkbox_label relative_position">
                    <input type="checkbox"/>
                    <label>电费</label>
                </label>
                <label class="checkbox_label relative_position">
                    <input type="checkbox"/>
                    <label>燃气费</label>
                </label>
                <label class="checkbox_label relative_position">
                    <input type="checkbox"/>
                    <label>取暖费</label>
                </label>
            </div>
            <div class="margin_form_middle">
                <label>缴费渠道：</label>
                <label class="checkbox_label relative_position">
                    <input type="checkbox"/>
                    <label>全部</label>
                </label>
                <label class="checkbox_label relative_position">
                    <input type="checkbox"/>
                    <label>APP</label>
                </label>
                <label class="checkbox_label relative_position">
                    <input type="checkbox"/>
                    <label>微信</label>
                </label>
                <label class="checkbox_label relative_position">
                    <input type="checkbox"/>
                    <label>网站</label>
                </label>
            </div>
            <input type="submit" value="确认" class="form_submit_water br_div"/>
        </form>
        <div class="aaa" style="overflow: auto; height: 330px;">
            <table class="bill_table">
                <!--<tr class="date_tr">-->
                <!--<td colspan="5">2018年10月10日</td>-->
                <!--</tr>-->
                <!--<tr class="water_tr tr_info">-->
                <!--<td>水费</td>-->
                <!--<td class="td_myhome">我的家佳佳&nbsp;|&nbsp;张三</td>-->
                <!--<td class="td_payway">缴费渠道</td>-->
                <!--<td class="td_time">2018年10月10日 11:11</td>-->
                <!--<td>200.00</td>-->
                <!--</tr>-->
                <!--<tr class="gas_tr tr_info">-->
                <!--<td>燃气费</td>-->
                <!--<td class="td_myhome">我的家&nbsp;|&nbsp;张三</td>-->
                <!--<td class="td_payway">#缴费渠道</td>-->
                <!--<td class="td_time">2018年10月10日 11:11</td>-->
                <!--<td>200.00</td>-->
                <!--</tr>-->
                <!--<tr class="warm_tr tr_info">-->
                <!--<td>暖气费</td>-->
                <!--<td class="td_myhome">我的家&nbsp;|&nbsp;张三</td>-->
                <!--<td class="td_payway">缴费渠道</td>-->
                <!--<td class="td_time">2018年10月10日 11:11:99</td>-->
                <!--<td>200.00</td>-->
                <!--</tr>-->
                <!--<tr class="electric_tr tr_info">-->
                <!--<td>电费</td>-->
                <!--<td class="td_myhome">我的家&nbsp;|&nbsp;张三san</td>-->
                <!--<td class="td_payway">缴费渠道</td>-->
                <!--<td class="td_time">2018年10月10日 11:11</td>-->
                <!--<td>200.00</td>-->
                <!--</tr>-->
                <!--<tr class="date_tr">-->
                <!--<td colspan="5">2018年10月10日</td>-->
                <!--</tr>-->
                <!--<tr class="electric_tr tr_info">-->
                <!--<td>电费</td>-->
                <!--<td class="td_myhome">我的家&nbsp;|&nbsp;张三san</td>-->
                <!--<td class="td_payway">缴费渠道</td>-->
                <!--<td class="td_time">2018年10月10日 11:11</td>-->
                <!--<td>200.00</td>-->
                <!--</tr>-->
                <!--<tr class="electric_tr tr_info">-->
                <!--<td>电费</td>-->
                <!--<td class="td_myhome">我的家&nbsp;|&nbsp;张三san</td>-->
                <!--<td class="td_payway">缴费渠道</td>-->
                <!--<td class="td_time">2018年10月10日 11:11</td>-->
                <!--<td>200.00</td>-->
                <!--</tr>-->
            </table>
        </div>
    </div>
</div>
<!--footer-->
<div class="footer">
    <div class="foot_body">
        <div>
            <img src="../../assets/images/foot/wechat.png"/>
            <div class="foot_txt">微信公众号</div>
        </div>
        <div>
            <img src="../../assets/images/foot/app.png"/>
            <div class="foot_txt">APP应用下载</div>
        </div>
        <p>
            嘉峪关，号称“天下第一雄关”，位于甘肃省嘉峪关市西5千米处最狭窄的山谷中部，城关两侧的城墙横穿沙漠戈壁，北连黑山悬壁长城，南接天下第一墩，是明长城最西端的关口，历史上曾被称为河西咽喉，因地势险要，建筑雄伟，有连陲锁钥之称。嘉峪关是古代“丝绸之路”的交通要塞，中国长城三大奇观之一（东有山海关、中有镇北台、西有嘉峪关）。
        </p>
    </div>
    <div class="foot_body">&copy;2012-2018嘉峪关xxxxx公司甘ICP备18043664号-18</div>
</div>
<script src="../assets/javascripts/jquery-1.11.1.min.js"></script>
<script src="../assets/javascripts/index.js"></script>
<script src="../assets/javascripts/jquery.validate.min.js"></script>
<script>
    var list = [{type: 0, time: "2018年10月27日 11:11", payway: "微信", money: "200.00", name: "我到家"}, {
        type: 0,
        time: "2018年10月27日 11:12",
        payway: "微信",
        money: "200.00",
        name: "我到家"
    }, {type: 0, time: "2018年10月29日 11:13", payway: "微信", money: "200.00", name: "我到家"}]

    for(var i =0;i<list.length;i++){
        //payTime支付时间
        // payType类型(燃气，水费。。)
        // payWay 支付渠道
        // myName 账户 (我的家|张三)
        // money 订单金额

        createtable(list[i].time,list[i].type,list[i].payway,list[i].name,list[i].money)
    }
    function createtable(payTime,payType,payWay,myName,money) {
        if($(".date_tr").last().text() !== payTime.split(" ")[0]){
            var tr = document.createElement("tr")
            tr.setAttribute("class", "date_tr")
            var tdd = document.createElement("td")
            tdd.setAttribute("class","date_tr_td")
            tdd.innerHTML = payTime.split(" ")[0]
            tr.appendChild(tdd)
            $(".bill_table").append(tr)
        }
    var tr1 = document.createElement("tr")
    var type = 2
    var td1 = document.createElement("td")
    var td2 = document.createElement("td")
    var td3 = document.createElement("td")
    var td4 = document.createElement("td")
    var td5 = document.createElement("td")
    switch (payType) {
        case 0:
            td1.innerHTML = "水费"
            tr1.setAttribute("class", "water_tr tr_info")
            break
        case 1:
            td1.innerHTML = "燃气费"
            tr1.setAttribute("class", "gas_tr tr_info")
            break
        case 2:
            td1.innerHTML = "暖气费"
            tr1.setAttribute("class", "electric_tr tr_info")
            break
    }
    td2.setAttribute("class", "td_myhome")
    td2.innerHTML = myName
    td3.setAttribute("class", "td_payway")
    td3.innerHTML = payWay
    td4.setAttribute("class", "td_time")
    td4.innerHTML = payTime
    td5.innerHTML =money
    tr1.appendChild(td1)
    tr1.appendChild(td2)
    tr1.appendChild(td3)
    tr1.appendChild(td4)
    tr1.appendChild(td5)
    $(".bill_table").append(tr1)
    }

</script>
</body>
</html>
